<template>
  <div class="bar">
    <div ref="barCharts" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import { Tools } from "@/model/tools.ts";
import { on, off } from "@utils/event.js";
import echarts from "echarts";
import macarons from "./macarons.json";
echarts.registerTheme("macarons", macarons.theme);
@Component
export default class PieCharts extends Tools {
  public $$refs!: {
    barCharts: any;
  };

  @Prop({ default: "柱状图" })
  private title!: string;
  @Prop()
  private subTitle!: string;
  @Prop()
  private legend!: Array<any>;
  @Prop({ default: "数据" })
  private seriesName!: string;
  @Prop({ default: "100%" })
  private width!: string;
  @Prop({ default: "480px" })
  private height!: string;
  @Prop()
  private xAxis!: Array<any>;
  @Prop()
  private yAxis!: Array<any>;

  //初试对象
  private barCharts: any = null;

  //方法
  private resize() {
    this.barCharts.resize();
  }

  private setValue(seriesData) {
    let vm = this;
    vm.$nextTick(() => {
      vm.barCharts.setOption({
        series: seriesData
      });
    });
  }

  mounted() {
    const options = {
      title: {
        text: this.title,
        subtext: "",
        x: "center"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        data: this.legend,
        top: "30"
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "70",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: this.xAxis,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: []
    };
    console.log(options.legend, "22");
    //设置副标题
    if (this.subTitle && this.subTitle !== "") {
      options.title.subtext = this.subTitle;
      options.legend.top = "48";
      options.grid.top = "88";
    }
    //列表
    const series: any = [];
    this.legend.forEach(seriesName => {
      series.push({
        name: seriesName,
        type: "bar",
        data: []
      });
    });
    options.series = series;

    //每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
    this.$nextTick(() => {
      this.barCharts = echarts.init(this.$refs.barCharts, "macarons");
      this.barCharts.setOption(options);
      //绑定事件
      on(window, "resize", this.resize);
    });
  }
  private beforeDestroy() {
    off(window, "resize", this.resize);
  }
}
</script>
